<template>
  <div class="filter-show">
    <div class="box">
      <div>
        <div><strong>区县</strong></div>
        <van-row class="van_span">
          <van-col>
            <span @click="artic(index, 'xueli')"
                  :class="xueli === index ? 'artic' : ''"
                  v-for="(item, index) in text.xueli"
                  :key="index"
                  class="span">{{ item }}</span>
          </van-col>
        </van-row>
      </div>

      <div>
        <div><strong>职业类型</strong></div>
        <van-row class="van_span">
          <van-col>
            <span @click="artic(index, 'jobs')"
                  :class="jobs === index ? 'artic' : ''"
                  v-for="(item, index) in text.jobs"
                  :key="index"
                  class="span">{{ item }}</span>
          </van-col>
        </van-row>
      </div>

      <div>
        <div><strong>信用等级</strong></div>
        <van-row class="van_span">
          <van-col>
            <span @click="artic(index, 'minzu')"
                  :class="minzu === index ? 'artic' : ''"
                  v-for="(item, index) in text.minzu"
                  :key="index"
                  class="span">{{ item }}</span>
          </van-col>
        </van-row>
      </div>

      <div>
        <div><strong>已认证客户服务数</strong></div>
        <van-row class="van_span">
          <van-col>
            <span @click="artic(index, 'hunyin')"
                  :class="hunyin === index ? 'artic' : ''"
                  v-for="(item, index) in text.hunyin"
                  :key="index"
                  class="span">{{ item }}</span>
          </van-col>
        </van-row>
      </div>

      <div>
        <div><strong>服务人数</strong></div>
        <van-row class="van_span">
          <van-col>
            <span @click="artic(index, 'xingzuo')"
                  :class="xingzuo === index ? 'artic' : ''"
                  v-for="(item, index) in text.shengxiao"
                  :key="index"
                  class="span">{{ item }}</span>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="btn">
      <van-button @click="deleteTiaojian"
                  round
                  type="primary">清除条件</van-button>
      <van-button @click="$emit('click-left')"
                  round
                  type="primary">确认筛选</van-button>
    </div>
  </div>
</template>

<script>
import '@/mock/px-mock.js'
import { userJobx } from '@/api/px-my'
export default {
  name: 'FilterShow',
  components: {},
  props: {},
  data () {
    return {
      nianxian: this.number,
      xingzuo: this.number,
      shengxiao: this.number,
      hunyin: this.number,
      minzu: this.number,
      xueli: this.number,
      jobs: this.number,
      number: -1,
      // 默认选中
      text: {
        jobs: [
          '全部职业',
          '月嫂',
          '育婴师',
          '保洁/清',
          '保姆',
          '产康师',
          '早教/托',
          '养老/陪',
        ],
        xueli: [
          '市辖区',
          '芙蓉区',
          '天心区',
          '岳麓区',
          '开福区',
          '雨花区',
          '长沙县',
          '望城区',
        ],
        minzu: [
          'AAAA级',
          'AAAAA级',
        ],
        hunyin: [
          '大于100人',
          '50-100',
          '30-50',
          '小于30人',
        ],
        shengxiao: [
          '500-1000人',
          '1000人以下',
          '200人以下',
          '200-500',
        ],
      }
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () { },
  methods: {
    deleteTiaojian () {
      this.nianxian = this.number
      this.xingzuo = this.number
      this.shengxiao = this.number
      this.hunyin = this.number
      this.minzu = this.number
      this.xueli = this.number
      this.jobs = this.number
    },
    querenTiaojian () {
      this.$router.push('./service')
    },
    artic (index, item) {
      if (item === 'nianxian') {
        this.nianxian = index
      } else if (item === 'xingzuo') {
        this.xingzuo = index
      } else if (item === 'shengxiao') {
        this.shengxiao = index
      } else if (item === 'hunyin') {
        this.hunyin = index
      } else if (item === 'minzu') {
        this.minzu = index
      } else if (item === 'xueli') {
        this.xueli = index
      } else if (item === 'jobs') {
        this.jobs = index
      }
    },
  },
}
</script>

<style scoped lang="less">
.filter-show {
  .btn {
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    margin-bottom: 100px;
    /deep/ .van-button {
      background: #1196db;
      border: 0;
      height: 70px;
      .van-button__content {
        padding: 0 70px;
        .van-button__text {
          font-size: 24px;
          font-weight: 700;
        }
      }
    }
  }
  .box {
    margin-top: 110px;
    padding: 20px 20px;
    strong {
      font-size: 28px;
    }
    .van_span {
      padding: 30px 10px;
      background: #fff;
      // .van-col {
      //   line-clamp: 2;
      // }
      .span {
        width: 97px;
        font-size: 22px;
        display: inline-block;
        color: #979191;
        border: 1px solid #979191;
        height: 50px;
        line-height: 50px;
        border-radius: 70px;
        padding: 0 20px;
        margin: 5px 15px;
        text-align: center;
        overflow: hidden;
      }
      .artic {
        color: #fff;
        background: #1196db;
        border-color: #1196db;
      }
    }
  }
}
</style>
